<template>
	<view class="filter-layout-item">
		<fui-row class="top">
			<fui-col :span="12" class="label">
				<text>{{label}}</text>
			</fui-col>
			<fui-col :span="12" class="align-right">
				<fui-text @click="onAddFilter" text="添加筛选" color="#0052D9" v-if="showFilterButton" size="28">
					<fui-icon size="32" color="#0052D9" name="plus"></fui-icon>
				</fui-text>
			</fui-col>
		</fui-row>

		<view class="bottom">
			<slot></slot>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			label: {
				type: String,
				default: 'label'
			},
			showFilterButton: Boolean
		},
		data() {
			return {

			}
		},
		methods: {

			onAddFilter() {
				this.$emit('filter')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter {
		&-layout {
			&-item {
				.top {
					display: flex;
					margin-top: 32rpx;
					align-items: center;

					.label {
						font-size: 28rpx;
						font-weight: 600;
						color: #3d3d3d;
					}
				}

				.bottom {
					margin-top: 16rpx;
				}
			}
		}
	}
</style>